<!--
  费率显示卡片（ 根据支付类型区分 ）
  只显示 费率实际内容 。 

  @author terrfly
  @site https://www.jeequan.com
  @date 2023/02/21 14:26
-->

<template>
  <div v-if="vdata.isMountedFinish">
    <div class="rate-card-wrapper" :class="{'rate-card-wrapper-phone':isMobile}">
      <!-- v-if说明：  （合并模式 && 商户进件时） ： 不显示，  其他情况都显示。  -->
      <div v-if="!(!props.wayName && props.configMode == 'mchApplyment')" class="card-header" :class="{'card-header-phone':isMobile}">
        <div class="h-left">
          <!-- 优先显示 拆分的名称：  -->
          <!-- 合并模式下： 商户自主进件不显示 合并配置 字眼（因为只读）， 其他场景显示合并配置。    -->
          {{ props.wayName || (props.configMode == 'mchApplyment' ? '' : '合并配置') }}

          <!-- 合并模式 && 开启 && 没有选择任何产品 -->
          <template v-if="props.mergeFeeByProps && vdata.mainFee.state == 1 && props.mergeFeeByProps.isMergeMode && props.mergeFeeByProps.selectedWayCodeList.filter(r => r.checked).length <= 0">
            <a-alert message="未勾选任何产品" banner />
          </template>
          
          &nbsp;&nbsp;
          <a-popover v-if="isShowsetParentRateBtn()" placement="top">
            <template #content><p>自动读取上级设置的费率值并填充至输入框， 优先级： 默认费率 --> 上级费率</p></template>
            <a-button shape="round" size="small" @click="setParentRateBtnFunc()"><BulbOutlined />读取默认费率</a-button>
          </a-popover>
        </div>
        <div v-if="isShowRightBtns()" class="h-right h-right2" style="display: flex;">
          <div class="h-right2-div">是否开通：<a-switch v-model:checked="vdata.mainFee.state" :checkedValue="1" :unCheckedValue="0" /></div>
          
          <!-- 只有开通了 && 不是转账产品才需要显示高级配置项 -->
          <template v-if="vdata.mainFee.state == 1 && vdata.mainFee.feeType != 'TRANSMODE'">
            <div v-if="props.configMode =='mgrIsv'" class="h-right2-div">是否可进件：<a-switch v-model:checked="vdata.mainFee.applymentSupport" :checkedValue="1" :unCheckedValue="0" /></div>
            <div class="h-right2-div">阶梯费率：<a-switch v-model:checked="vdata.mainFee.feeType" :disabled="vdata.isParentFixed" checkedValue="LEVEL" unCheckedValue="SINGLE" @change="changeFeeTypeFunc($event)" /></div>
            <div class="h-right2-div">银联模式：<a-switch :disabled="vdata.mainFee.feeType == 'SINGLE' || vdata.isParentFixed" :checked="vdata.mainFee.creditCardPaywayFee != null " @change="changeIsYLmodel($event)" /></div>
          </template>
        </div>
      </div>

      <div v-if="vdata.mainFee.state == 1" class="rate-card-content">
        <!-- 单笔费率  -->
        <div v-if="vdata.mainFee.feeType == 'SINGLE'" class="weChat-pay-list">
          <!-- 服务商底价 -->
          <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item" :class="{'w-pay-item-phone':isMobile}">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">服务商底价：</div>
            单笔： {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].feeRate }}%
          </div>

          <!-- 上级代理商底价 -->
          <div v-if="readonlyParentAgentRate()" class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}：</div>
            单笔： {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].feeRate }}%
          </div>


          <!-- 主配置费率 -->
          <div class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap') }}：</div>
            <div v-if="isMainReadonly()">{{ vdata.mainFee.feeRate }}%</div>
            <div v-else><a-input-number v-model:value="vdata.mainFee.feeRate"><template #addonAfter>%</template></a-input-number></div>
          </div>

          <div v-if="getShowName('agentdefMap')" class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap') }}：</div>
            <div><a-input-number v-model:value="vdata.agentdefFee.feeRate"><template #addonAfter>%</template></a-input-number></div>
          </div>

          <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap') }}：</div>
            <div><a-input-number v-model:value="vdata.mchapplydefFee.feeRate"><template #addonAfter>%</template></a-input-number></div>
          </div>
        </div>

        <!-- 转账模式 -->
        <div v-if="vdata.mainFee.feeType == 'TRANSMODE'" class="weChat-pay-list">
          <!-- 服务商底价 -->
          <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item" :class="{'w-pay-item-phone':isMobile}">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">服务商底价：</div>
            单笔：{{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].fixFee }}元 + {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].feeRate }}%<br>
            保底：{{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].minFee }}元<br>封顶：{{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].maxFee }}元
          </div>

          <!-- 上级代理商底价 -->
          <div v-if="readonlyParentAgentRate()" class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}：</div>
            <template v-if="typeof(pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode]).feeRate == 'number'">
              单笔：{{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].fixFee }}元 + {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].feeRate }}%<br>
              保底：{{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].minFee }}元<br>封顶：{{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].maxFee }}元
            </template>
          </div>

          <!-- 主配置费率 -->
          <div class="w-pay-item">
            <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap') }}：</div>
            <div v-if="isMainReadonly()">{{ vdata.mainFee.feeRate }}%</div>
            <div v-else>
              <a-input-number v-model:value="vdata.mainFee.fixFee" style="max-width:135px"><template #addonAfter>元</template></a-input-number> + 
              <a-input-number v-model:value="vdata.mainFee.feeRate" style="max-width:135px"><template #addonAfter>%</template></a-input-number>
              <br><br>
              <a-input-number v-model:value="vdata.mainFee.minFee" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
              <a-input-number v-model:value="vdata.mainFee.maxFee" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number>
            </div>
          </div>
        </div>

        <!-- 阶梯费率 -->
        <div v-if="vdata.mainFee.feeType == 'LEVEL'">
          <!-- 阶梯模式： 非银联 -->
          <template v-if="!vdata.mainFee.creditCardPaywayFee">
            <div v-for="(levelItem, j) in vdata.mainFee.levelList" :key="j" class="weChat-pay-list" style="margin-top:15px">
              <!-- 列： 价格区间 -->
              <div class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}" style="min-width: 150px">价格区间：</div>

                <!-- 判断： 固定格式 -->
                <template v-if="vdata.isParentFixed">
                  <div style="min-width:150px">{{ levelItem.minFee }} ~  {{ levelItem.maxFee }} 元</div>
                </template>
                <template v-else>
                  <a-input-number v-model:value="levelItem.minFee" style="width:150px" @change="levelItemChangeFunc($event, j, 'minFee')"><template #addonAfter>~</template></a-input-number>
                  <a-input-number v-model:value="levelItem.maxFee" style="width:150px;" @change="levelItemChangeFunc($event, j, 'maxFee')"><template #addonAfter>元</template></a-input-number>
                </template>
              </div>

              <!-- 服务商底价 -->
              <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">服务商底价：</div>
                <div style="min-width: 115px">{{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].levelList[j].feeRate }}%</div>
              </div>

              <!-- 上级代理商底价 -->
              <div v-if="readonlyParentAgentRate()" class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}：</div>
                <div style="min-width: 115px">
                  {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList.length > 0 ? pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList[j].feeRate + '%' : '无' }}
                </div>
              </div>

              <!-- 列： 主要配置费率值 -->
              <div class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap') }}：</div>
                <div v-if="isMainReadonly()" style="min-width:100px">{{ levelItem.feeRate }}%</div>
                <a-input-number v-else v-model:value="levelItem.feeRate"><template #addonAfter>%</template></a-input-number>
              </div>

              <!-- 列： 代理商默认配置值 -->
              <div v-if="getShowName('agentdefMap')" class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap') }}：</div>
                <a-input-number v-model:value="vdata.agentdefFee.levelList[j].feeRate"><template #addonAfter>%</template></a-input-number>
              </div>

              <!-- 列： 商户进件默认值 -->
              <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
                <div v-if="j == 0" class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap') }}：</div>
                <a-input-number v-model:value="vdata.mchapplydefFee.levelList[j].feeRate"><template #addonAfter>%</template></a-input-number>
              </div>

              <!-- 列： 操作列 -->
              <div class="w-pay-item">
                <div v-if="j == 0" style="height: 40px;" />
                <!-- 固定格式时 ， 不允许删除 或新增 -->
                <a-button v-if="isAllowLevelAddOrDel()" type="link" danger @click="removeLevelItem(j)">删除</a-button>
              </div>
            </div>
          
            <div style="margin-top:30px; margin-bottom: 20px; display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-around;">
              <!-- 固定格式时 ， 不允许删除 或新增 -->
              <a-button v-if="isAllowLevelAddOrDel()" type="dashed" @click="addLevelItem()">新增阶梯</a-button>
            </div>
          </template>
          <!-- 阶梯模式： 非银联   结束-->

          <!-- 银联模式 -->
          <template v-if="vdata.mainFee.creditCardPaywayFee">
            <a-divider v-if="vdata.mainFee.creditCardPaywayFee" orientation="left">借记卡</a-divider>

            <div class="weChat-pay-list">
              <div class="w-pay-item" style="width: 130px;">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">价格区间：</div>
                <div style="height:32px;line-height: 32px;">金额 &lt;= 1000元：</div><br>
                <div style="height:32px;line-height: 32px;">金额 &gt; 1000元：</div>
              </div>

              <!-- 服务商底价 -->
              <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">服务商底价：</div>
                <a-input-number :controls="false" :value="pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].levelList[0].feeRate" disabled><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number :controls="false" :value="pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].levelList[1].feeRate" disabled><template #addonAfter>%</template></a-input-number>
              </div>
              <!-- 上级代理商底价 -->
              <div v-if="readonlyParentAgentRate()" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}：</div>

                <a-input-number :controls="false" :value="pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList.length > 0 ? pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList[0].feeRate : ''" disabled><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number :controls="false" :value="pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList.length > 0? pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].levelList[1].feeRate: ''" disabled><template #addonAfter>%</template></a-input-number>
              </div>

              <div class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap') }}：</div>

                <a-input-number v-model:value="vdata.mainFee.levelList[0].feeRate" :disabled="isMainReadonly()" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.mainFee.levelList[1].feeRate" :disabled="isMainReadonly()" :controls="false"><template #addonAfter>%</template></a-input-number>
              </div>
              <div v-if="getShowName('agentdefMap')" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap') }}：</div>
                <a-input-number v-model:value="vdata.agentdefFee.levelList[0].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.agentdefFee.levelList[1].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number>
              </div>
              <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap') }}：</div>
                <a-input-number v-model:value="vdata.mchapplydefFee.levelList[0].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.mchapplydefFee.levelList[1].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number>
              </div>
            </div>


            <br>
            <a-divider v-if="vdata.mainFee.creditCardPaywayFee" orientation="left">贷记卡</a-divider>

            <div class="weChat-pay-list">
              <div class="w-pay-item" style="width: 130px;">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">价格区间：</div>
                <div style="height:30px;line-height: 30px;">金额 &lt;= 1000元：</div><br>
                <div style="height:30px;line-height: 30px;">金额 &gt; 1000元：</div><br>
              </div>

              <!-- 服务商底价 -->
              <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">服务商底价：</div>
                <a-input-number :controls="false" :value="pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].creditCardPaywayFee.levelList[0].feeRate" disabled><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number :controls="false" :value="pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].creditCardPaywayFee.levelList[1].feeRate" disabled><template #addonAfter>%</template></a-input-number><br><br>
              </div>
              <!-- 上级代理商底价 -->
              <div v-if="readonlyParentAgentRate()" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}：</div>

                <a-input-number :controls="false" :value="pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee? pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee.levelList[0].feeRate : ''" disabled><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number :controls="false" :value="pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee ? pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee.levelList[1].feeRate : ''" disabled><template #addonAfter>%</template></a-input-number><br><br>
              </div>

              <div class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap') }}：</div>

                <a-input-number v-model:value="vdata.mainFee.creditCardPaywayFee.levelList[0].feeRate" :disabled="isMainReadonly()" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.mainFee.creditCardPaywayFee.levelList[1].feeRate" :disabled="isMainReadonly()" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
              </div>
              <div v-if="getShowName('agentdefMap')" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap') }}：</div>
                <a-input-number v-model:value="vdata.agentdefFee.creditCardPaywayFee.levelList[0].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.agentdefFee.creditCardPaywayFee.levelList[1].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
              </div>
              <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
                <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap') }}：</div>
                <a-input-number v-model:value="vdata.mchapplydefFee.creditCardPaywayFee.levelList[0].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
                <a-input-number v-model:value="vdata.mchapplydefFee.creditCardPaywayFee.levelList[1].feeRate" :controls="false"><template #addonAfter>%</template></a-input-number><br><br>
              </div>
            </div>
          </template>
          <!-- 银联模式  结束-->
          
          <!-- 高级配置 -->
          <a-collapse>
            <a-collapse-panel key="1" :class="{'config-phone': isMobile}" header="高级配置">
              <a-divider v-if="vdata.mainFee.creditCardPaywayFee" orientation="left">借记卡</a-divider>

              <div class="weChat-pay-list" style="margin-top:10px">
                <div class="w-pay-item" />

                <div class="w-pay-item" style="width: 100px;">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">价格类型：</div>
                  <div style="height:30px;line-height: 30px;">保底费用：</div><br>
                  <div style="height:30px;line-height: 30px;">封顶费用：</div>
                </div>

                <!-- 服务商底价 -->
                <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
                  <div class="w-pay-item">
                    <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}" style="min-width: 140px">服务商底价: </div>
                    <div style="height: 30px">保底： {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].minFee }} 元 </div><br>
                    <div style="height: 30px">封顶： {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].maxFee }} 元</div>
                  </div>
                </div>

                <!-- 上级代理商底价 -->
                <div v-if="readonlyParentAgentRate()" class="w-pay-item">
                  <div class="w-pay-item" style="min-width: 140px">
                    <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}: </div>
                    <div style="height: 30px">保底： {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].minFee }} 元 </div><br>
                    <div style="height: 30px">封顶： {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].maxFee }} 元</div>
                  </div>
                </div>


                <div class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap', '费用') }}: </div>
                  <a-input-number v-model:value="vdata.mainFee.minFee" :disabled="isMainReadonly()" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.mainFee.maxFee" :disabled="isMainReadonly()" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number>
                </div>
                <div v-if="getShowName('agentdefMap')" class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap', '费用') }}：</div>
                  <a-input-number v-model:value="vdata.agentdefFee.minFee" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.agentdefFee.maxFee" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number>
                </div>
                <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap', '费用') }}：</div>
                  <a-input-number v-model:value="vdata.mchapplydefFee.minFee" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.mchapplydefFee.maxFee" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number>
                </div>
              </div>

              <!-- 包含信用卡的 费率价格配置信息  -->
              <a-divider v-if="vdata.mainFee.creditCardPaywayFee" style="margin-top:30px" orientation="left">贷记卡</a-divider>
              <div v-if="vdata.mainFee.creditCardPaywayFee" class="weChat-pay-list" style="margin-top:0px">
                <div class="w-pay-item" />

                <div class="w-pay-item" style="width: 100px;">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">价格类型：</div>
                  <div style="height:30px;line-height: 30px;">保底费用：</div><br>
                  <div style="height:30px;line-height: 30px;">封顶费用：</div>
                </div>

                <!-- 服务商底价 -->
                <div v-if="isShowReadonlyIsvCostRate()" class="w-pay-item">
                  <div class="w-pay-item">
                    <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}" style="min-width: 140px">服务商底价: </div>
                    <div style="height: 30px">保底： {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].creditCardPaywayFee.minFee }} 元 </div><br>
                    <div style="height: 30px">封顶： {{ pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode].creditCardPaywayFee.maxFee }} 元</div>
                  </div>
                </div>
                <!-- 上级代理商底价 -->
                <div v-if="readonlyParentAgentRate()" class="w-pay-item">
                  <div class="w-pay-item" style="min-width: 140px">
                    <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ readonlyParentAgentRate() }}: </div>
                    <div style="height: 30px">保底： {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee?.minFee }} 元 </div><br>
                    <div style="height: 30px">封顶： {{ pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode].creditCardPaywayFee?.maxFee }} 元</div>
                  </div>
                </div>

                
                <div class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">* {{ getShowName('mainRateMap', '费用') }}：</div>
                  <a-input-number v-model:value="vdata.mainFee.creditCardPaywayFee.minFee" :disabled="isMainReadonly()" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.mainFee.creditCardPaywayFee.maxFee" :disabled="isMainReadonly()" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
                <div v-if="getShowName('agentdefMap')" class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('agentdefMap', '费用') }}：</div>
                  <a-input-number v-model:value="vdata.agentdefFee.creditCardPaywayFee.minFee" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.agentdefFee.creditCardPaywayFee.maxFee" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
                <div v-if="getShowName('mchapplydefMap')" class="w-pay-item">
                  <div class="w-pay-title" :class="{'w-pay-title-phone':isMobile}">{{ getShowName('mchapplydefMap', '费用') }}：</div>
                  <a-input-number v-model:value="vdata.mchapplydefFee.creditCardPaywayFee.minFee" :controls="false"><template #addonBefore>保底：</template><template #addonAfter>元</template></a-input-number><br><br>
                  <a-input-number v-model:value="vdata.mchapplydefFee.creditCardPaywayFee.maxFee" :controls="false"><template #addonBefore>封顶：</template><template #addonAfter>元</template></a-input-number><br><br>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, defineProps, reactive, inject, getCurrentInstance, onMounted } from 'vue'
  
  // 导入全局函数
const { $infoBox, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties


// 组件注入
const props: any = defineProps({
  wayName: { type: String, default: '' }, // 支付产品名称，  若没有则不显示
  configMode: { type: String, default: '' },   // 模式
  readonlyItemWayCode: { type: String, default: '' },   // 只读模式的读取数据 
  mainFeeByProps: { type: Object, default: () => {} },
  agentdefFeeByProps: { type: Object, default: () => {} },
  mchapplydefFeeByProps: { type: Object, default: () => {} },
  mergeFeeByProps: { type: Object, default: () => {} }

})


// 响应式对象
const vdata: any = reactive({
  mainFee: null, 
  agentdefFee: null, 
  mchapplydefFee: null,
  isMountedFinish: false, //是否挂载完毕

  isParentFixed: false, // 是否上级已经明确费率模式。  比如： 服务商配置了阶梯， 那么下面所有的都必须是阶梯费率

})

// 获取到上一级的 所有vdata参数 
let pdataInject : any = inject('pvdata')
let pvdata : any = pdataInject.value

// 注入函数
let getShowName : any = inject('getShowNameFunc')


// 注入函数 判断是否普通商户的配置页面。 
let isNormalMchPage : any = inject('isNormalMchPageFunc')

// 参数注入： 是否手机端
let isMobileInject : any = inject('isMobile')
let isMobile = (isMobileInject && isMobileInject.value) ? true : false
console.log('isMobile:', isMobile)

onMounted( () => {

  vdata.mainFee = props.mainFeeByProps // 可编辑
  vdata.agentdefFee = props.agentdefFeeByProps
  vdata.mchapplydefFee = props.mchapplydefFeeByProps


  // 显示代理商默认费率，  但是 代理商费率不存在或者不一致
  if(getShowName('agentdefMap') && vdata.agentdefFee.feeType != vdata.mainFee.feeType){
    vdata.agentdefFee.feeType = vdata.mainFee.feeType
    vdata.agentdefFee.minFee = vdata.mainFee.minFee
    vdata.agentdefFee.maxFee = vdata.mainFee.maxFee

    if(vdata.mainFee.levelList){
      vdata.agentdefFee.levelList = JSON.parse(JSON.stringify(vdata.mainFee.levelList))
      vdata.agentdefFee.levelList.forEach(r => { r.feeRate = null})
    }
    if(vdata.mainFee.creditCardPaywayFee){
      vdata.agentdefFee.creditCardPaywayFee = JSON.parse(JSON.stringify(vdata.mainFee.creditCardPaywayFee))
      vdata.agentdefFee.creditCardPaywayFee.levelList.forEach(r => { r.feeRate = null})
    }
  }

  // 显示商户默认费率，  但是 默认费率不存在或者不一致
  if(getShowName('mchapplydefMap') && vdata.mchapplydefFee.feeType != vdata.mainFee.feeType){
    vdata.mchapplydefFee.feeType = vdata.mainFee.feeType
    vdata.mchapplydefFee.minFee = vdata.mainFee.minFee
    vdata.mchapplydefFee.maxFee = vdata.mainFee.maxFee

    if(vdata.mainFee.levelList){
      vdata.mchapplydefFee.levelList = JSON.parse(JSON.stringify(vdata.mainFee.levelList))
      vdata.mchapplydefFee.levelList.forEach(r => { r.feeRate = null})
    }
    if(vdata.mainFee.creditCardPaywayFee){
      vdata.mchapplydefFee.creditCardPaywayFee = JSON.parse(JSON.stringify(vdata.mainFee.creditCardPaywayFee))
      vdata.mchapplydefFee.creditCardPaywayFee.levelList.forEach(r => { r.feeRate = null})
    }
  }


  let setFixFeeFunc = (copyR) => {

    // 删除费率配置的值 
    copyR.feeRate = null
    if(copyR.levelList){
      copyR.levelList.forEach(e1 => e1.feeRate = null)
    }
    if(copyR.creditCardPaywayFee && copyR.creditCardPaywayFee.levelList){
      copyR.creditCardPaywayFee.levelList.forEach(e1 => e1.feeRate = null)
    }

    copyR.state = 0 // 默认未开通 


    if(!vdata.mainFee || vdata.mainFee.feeType != copyR.feeType){
      Object.assign(vdata.mainFee, JSON.parse(JSON.stringify(copyR)))
    }

    if(!vdata.agentdefFee || vdata.agentdefFee.feeType != copyR.feeType){
      Object.assign(vdata.agentdefFee, JSON.parse(JSON.stringify(copyR)))
    }

    if(!vdata.mchapplydefFee || vdata.mchapplydefFee.feeType != copyR.feeType){
      Object.assign(vdata.mchapplydefFee, JSON.parse(JSON.stringify(copyR)))
    }

    vdata.isParentFixed = true

  }


   // 判断 是否固定格式 （ 比如  服务商固定格式是 单笔， 那么必须是单笔， 比如阶梯那必须是阶梯。 ）
    // 配置代理商模式时： 

    // 配置代理商 或者 配置特约商户（注意 不是普通商户）， 并且包含服务商费率

    // 代理商配置自己的页面  明确标识： isParentFixed = true (阶梯费率 只读模式。 )
    if(props.configMode == 'agentSelf'){
      vdata.isParentFixed = true
    }

    // 商户自主进件  明确标识： isParentFixed = true (阶梯费率 只读模式。 )
    if(props.configMode == 'mchApplyment'){
      vdata.isParentFixed = true
    }

    // 代理商配置下级  明确标识： isParentFixed = true (阶梯费率 只读模式。 )
    if(props.configMode == 'agentSubagent'){

       // 设置 固定格式
      setFixFeeFunc(JSON.parse(JSON.stringify(pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode])))
    }


    // 代理商配置下级商户  明确标识： isParentFixed = true (阶梯费率 只读模式。 )
    if(props.configMode == 'agentMch'){

      // 设置 固定格式
      setFixFeeFunc(JSON.parse(JSON.stringify(pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode])))
    }

    // 代理商 进件 明确标识： isParentFixed = true (阶梯费率 只读模式。 )
    if(props.configMode == 'agentApplyment'){

    // 设置 固定格式
      setFixFeeFunc(JSON.parse(JSON.stringify(pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode])))
    }


    if((props.configMode == 'mgrAgent' || (props.configMode == 'mgrMch' && !isNormalMchPage()))
    || props.configMode == 'mgrApplyment'
    && pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode]){

      // 设置 固定格式
      setFixFeeFunc(JSON.parse(JSON.stringify(pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode])))

    }

  vdata.isMountedFinish = true
})


// 获取到需要处理的哪几个记录 
function getList(){

let result : any = []

if(getShowName('agentdefMap')){
  result.push(vdata.agentdefFee)
}
if(getShowName('mchapplydefMap')){
  result.push(vdata.mchapplydefFee)
}

result.push(vdata.mainFee)

return result
}

// 新增一条 阶梯 记录 
function addLevelItem(){
  getList().forEach(r => r.levelList.push({}))
}

// 删除一个阶梯费率 
function removeLevelItem(i){
  getList().forEach(r => r.levelList.splice(i, 1))
}


// 切换 主 费率模式时， 切换其他的费率模式
function changeFeeTypeFunc(feeType){
  getList().forEach(r => r.feeType = feeType)

  // 如果切换 到阶梯费率时 && 不存在阶梯的值， 那么需要配置上 默认值。 
  if(feeType == 'LEVEL'){
    getList().forEach(r => {

      if(typeof(r.minFee) == 'undefined' && typeof(r.maxFee) == 'undefined' ){
        r.minFee = 0
        r.maxFee = 99999
      }

      // 设置默认 阶梯。 
      if(!r.levelList || r.levelList.length <= 0){
        r.levelList = [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}]
      }


    })
  }else{

    // 阶梯 --》 单笔：   关闭银联模式。 
    getList().forEach(r => {
      delete r.creditCardPaywayFee
    })
  }
}

// 阶梯费率变化时： 需要将其他的费率也同步更改
function levelItemChangeFunc(amount, levelIndex, type){
  getList().forEach(r => r.levelList[levelIndex][type] = amount)
}

// 切换是否银联模式 
function changeIsYLmodel(state){

  getList().forEach(r => {

    // 银联模式
    if(state){
      r.levelList = [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}]
      r.creditCardPaywayFee = {minFee: 0, maxFee: 99999, levelList: [{minFee: 0, maxFee: 1000}, {minFee: 1000, maxFee: 999999.99}] }

      // 设置默认费率 
      if(typeof(r.minFee) == 'undefined' && typeof(r.maxFee) == 'undefined' ){
        r.minFee = 0
        r.maxFee = 99999
      }

    }else{
      delete r.creditCardPaywayFee
    }

  })

  // 最后在赋值并进行页面的渲染（如果采用v-model 可能导致页面渲染报错的问题）
  vdata.isYLmodel = state
}


// 判断 是否显示 服务商底价的显示列
function isShowReadonlyIsvCostRate(){

  // 普通商户 返回false 
  if(isNormalMchPage()){
    return false
  }

  return (props.configMode == 'mgrMch' || props.configMode == 'mgrAgent' || props.configMode == 'mgrApplyment' )
}

// 判断 是否显示 上级代理商 显示列
function readonlyParentAgentRate(){

  // 普通商户 返回false 
  if(isNormalMchPage()){
    return false
  }

  if(props.configMode == 'mgrMch' || props.configMode == 'mgrAgent' || props.configMode == 'mgrApplyment' ){
    return '上级代理商费率'
  }

  if(props.configMode == 'agentSubagent' || props.configMode == 'agentMch' || props.configMode == 'agentApplyment'  ){
    return '我的代理费率'
  }

  return 
}


// 判断是否显示 读取上级费率
function isShowsetParentRateBtn(){

// 设置服务商底价 , 代理商自己的页面, 普通商户 , 商户的进件页面 不需要显示
if(props.configMode == 'mgrIsv' || props.configMode == 'agentSelf' || props.configMode == 'mchSelfApp1' || props.configMode == 'mchApplyment'){
 return false
}

// 代理商配置商户 20230313 改为 只读，无需读取。 
if(props.configMode == 'agentMch'){
  return false
}

return true
}

// 判断是否显示 右侧按钮列
function isShowRightBtns(){

  if(props.configMode == 'agentSelf'){
    return false
  }

  // 商户自主进件 不需要显示。 
  if(props.configMode == 'mchApplyment'){
    return false
  }

  return true

}

// 是否允许 阶梯的删除 或新增 
function isAllowLevelAddOrDel(){
  if(props.configMode == 'agentSelf'){ // 代理商配置自己的费率不允许 
    return false
  }

  // 固定格式 不允许新增 
  if(vdata.isParentFixed){
    return false
  }

  return true
}


// 读取默认费率
function setParentRateBtnFunc(){

  // 判断上级的费率是否可用
  let checkFunc = (rate) => {

    if(!rate){
      return null
    }

    // 单笔
    if(rate.feeType == 'SINGLE' && typeof(rate.feeRate) != 'undefined'){
      return rate
    }

    // 阶梯
    if(rate.feeType == 'LEVEL' && rate.levelList && rate.levelList.length > 0 && rate.levelList[0].feeRate ){
      return rate
    }

    // 转账模式
    if(rate.feeType == 'TRANSMODE' && typeof(rate.feeRate) != 'undefined' && typeof(rate.fixFee) != 'undefined' ){
      return rate
    }

    return null
  }

  let rate = checkFunc(pvdata.readonlyParentDefRateRateMap[props.readonlyItemWayCode]) ||  checkFunc(pvdata.readonlyParentAgentRateMap[props.readonlyItemWayCode]) ||  checkFunc(pvdata.readonlyIsvCostRateMap[props.readonlyItemWayCode])

  if(rate){

    // 只取到基础费率数据
    Object.assign(vdata.mainFee, JSON.parse(JSON.stringify({
      feeType: rate.feeType,
      feeRate: rate.feeRate,
      levelList: rate.levelList,
      maxFee: rate.maxFee,
      fixFee: rate.fixFee,
      minFee: rate.minFee,
      creditCardPaywayFee: rate.creditCardPaywayFee,
    })))

    return false
  }
}


// 判断 main数据是否只读 
function isMainReadonly(){
  return props.configMode == 'mchApplyment' || props.configMode == 'agentSelf' || props.configMode == 'agentMch'
}


</script>

<style lang="less" scoped>

.rate-card-wrapper {
  margin-bottom: 20px;
  position: relative;

  width: 100%;
  // height: 182px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 48px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;
    .card-title {
      font-size: 14px;
      font-weight: 700;
    }
    .h-left {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      div:nth-child(n + 2) {
        margin-left: 30px;
      }
    }
  }
  .rate-card-content {
    padding: 30px 30px 40px 30px;
  }

}


.weChat-pay-list {
  display: flex;
  align-items: center;

  .w-pay-title {
    margin-bottom: 20px;
  }

  .w-pay-item:nth-child(n+2) {
    margin-left: 50px;
  }
}

.h-right2-div{
    margin-left: 20px
}
// 以下 为移动端样式 移动端所有样式类名 均以 -phone 结尾
.rate-card-wrapper-phone{
  width: 100%;
  overflow-x: auto;
  white-space: nowrap !important;
  font-size: 12px !important;
  .w-pay-title-phone{
    width: 30vw;
  }
}
.config-phone{
  overflow-x: auto;
  background-color: #fff;
 ::v-deep .ant-collapse-header{
    background-color: #fafafa;
  }
  ::v-deep .ant-input-number{
    min-width: 80px;
  }
}
</style>
